<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>自定义节点选中样式</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 本案例演示如何通过交互设置元素状态：当鼠标hover到圆形节点上时，圆形节点执行动画效果
       * by 镜曦。
       */
      G6.registerNode(
        'animate-circle',
        {
          setState: function setState(name, value, item) {
            const shape = item.get('keyShape');
            const cfg = item.get('model');
            if (name === 'running') {
              if (value) {
                shape.animate(
                  ratio => {
                    const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
                    return {
                      r: cfg.size / 2 + diff,
                    };
                  },
                  {
                    repeat: true,
                    duration: 1000,
                    easing: 'easeCubic',
                  },
                );
              } else {
                shape.stopAnimate();
                shape.attr('lineDash', null);
              }
            }
          },
        },
        'circle',
      );
      const data = {
        nodes: [
          {
            x: 100,
            y: 100,
            shape: 'animate-circle',
            label: 'animate-circle',
            id: 'node1',
            size: 30,
            labelCfg: {
              position: 'bottom',
            },
          },
          {
            x: 400,
            y: 100,
            shape: 'rect',
            label: 'rect2',
            id: 'node2',
            labelCfg: {
              position: 'bottom',
            },
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: 'line',
            labelCfg: {
              refY: 10,
            },
            style: {
              endArrow: true,
            },
          },
        ],
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        defaultNode: {
          color: '#87e8de',
          style: {
            fill: '#87e8de',
          },
        },
        defaultEdge: {
          color: '#bae7ff',
        },
        modes: {
          default: ['drag-node'],
        },
      });
      graph.data(data);
      graph.render();

      graph.on('node:mouseenter', ev => {
        const node = ev.item;
        graph.setItemState(node, 'running', true);
      });

      graph.on('node:mouseleave', ev => {
        const node = ev.item;
        graph.setItemState(node, 'running', false);
      });
    </script>
  </body>
</html>
